<!-- 编号设置表单 -->
<template>
  <div class="serial-number-form">
    <el-form :model="formStore">
      <el-form-item>
        <el-checkbox v-model="formStore.serialNumberEnable" label="编号设置" />
      </el-form-item>
      <el-form-item>
        <el-checkbox
          v-model="formStore.serialNumberOnly"
          label="仅使用编号作为文件名"
          :disabled="enableSerialNumber"
        />
      </el-form-item>
      <el-form-item label="位置">
        <el-radio-group
          v-model="formStore.serialNumberPosition"
          :disabled="enableSerialNumber"
        >
          <el-radio value="0">开头</el-radio>
          <el-radio value="1">末尾</el-radio>
          <el-radio value="2">自定义</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="formStore.serialNumberPosition === '2'">
        <div class="sub">
          <el-icon class="icon"><Paperclip /></el-icon>
          <div class="sub-item">
            <el-form-item>
              第
              <el-input-number
                v-model="formStore.serialNumbeAfterCharacter"
                style="margin: 0 8px"
                size="small"
                :min="0"
                :disabled="enableSerialNumber"
              />
              个字符后
            </el-form-item>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="类型">
        <el-radio-group
          v-model="formStore.serialNumberType"
          :disabled="enableSerialNumber"
        >
          <el-radio value="0">数字</el-radio>
          <el-radio value="1">字母</el-radio>
          <el-radio value="2">随机字符</el-radio>
          <el-radio value="3">时间</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <div class="sub">
          <el-icon class="icon"><Paperclip /></el-icon>
          <div class="sub-item" style="height: 68px">
            <template v-if="formStore.serialNumberType === '0'">
              <el-form-item
                label="起始"
                style="margin-right: 18px"
                :disabled="enableSerialNumber"
              >
                <el-input-number
                  v-model="formStore.serialNumberStart"
                  :min="0"
                  size="small"
                />
              </el-form-item>
              <el-form-item label="增量">
                <el-input-number
                  v-model="formStore.serialNumberStep"
                  :disabled="enableSerialNumber"
                  size="small"
                />
              </el-form-item>
              <el-form-item label="位数">
                <el-input-number
                  v-model="formStore.serialNumberDigit"
                  :min="1"
                  :disabled="enableSerialNumber"
                  size="small"
                />
              </el-form-item>
            </template>
            <template v-if="formStore.serialNumberType === '1'">
              <el-form-item label="起始" style="margin-right: 18px">
                <el-input-number
                  v-model="formStore.serialNumberCharStart"
                  :min="1"
                  :disabled="enableSerialNumber"
                  size="small"
                />
              </el-form-item>
              <el-form-item label="增量">
                <el-input-number
                  v-model="formStore.serialNumberChartStep"
                  :min="1"
                  :disabled="enableSerialNumber"
                  size="small"
                />
              </el-form-item>
            </template>
            <template v-if="formStore.serialNumberType === '2'">
              <el-form-item label="随机规则">
                <el-select
                  v-model="formStore.serialNumberRandomRule"
                  :disabled="enableSerialNumber"
                  size="small"
                  style="width: 100px"
                >
                  <el-option label="纯数字" value="0" />
                  <el-option label="纯字母" value="1" />
                  <el-option label="数字加字母" value="2" />
                </el-select>
              </el-form-item>
              <el-form-item label="字符数">
                <el-input-number
                  v-model="formStore.serialNumberRandomChartCount"
                  :min="1"
                  :max="10"
                  :disabled="enableSerialNumber"
                  size="small"
                />
              </el-form-item>
            </template>
            <template v-if="formStore.serialNumberType === '3'">
              <el-form-item label="时间类型">
                <el-select
                  v-model="formStore.serialNumberDateType"
                  :disabled="enableSerialNumber"
                  size="small"
                  style="width: 120px"
                >
                  <el-option label="当前时间" value="0" />
                  <el-option label="文件创建时间" value="1" />
                  <el-option label="文件修改时间" value="2" />
                </el-select>
              </el-form-item>
              <el-form-item label="样式">
                <el-select
                  v-model="formStore.serialNumberDateFormat"
                  :disabled="enableSerialNumber"
                  size="small"
                  style="width: 220px"
                >
                  <el-option label="2024-12-18" value="0" />
                  <el-option label="2024年12月18日" value="1" />
                  <el-option label="20241218" value="2" />
                  <el-option label="2024-12-18 17:28:50" value="3" />
                  <el-option label="2024-12-18-17-28-50" value="4" />
                  <el-option label="2024年12月18日 17时28分50秒" value="5" />
                  <el-option label="20241218172550" value="6" />
                </el-select>
              </el-form-item>
            </template>
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { Paperclip } from '@element-plus/icons-vue'
import { computed } from 'vue'
import useSerialNumberFormStore from '@renderer/store/Form/SerialNumberFormStore'

const formStore = useSerialNumberFormStore()

// 启用编号设置
const enableSerialNumber = computed(() => !formStore.serialNumberEnable)
</script>

<style lang="less" scoped>
.el-form-item {
  margin-bottom: 14px;
}

.el-input-number--small {
  width: 90px;
}

.serial-number-form {
  .sub {
    flex: 1;
    display: flex;
    align-items: flex-start;
    padding-left: 10px;

    .icon {
      position: relative;
      top: 8px;
      font-size: 16px;
      margin-right: 12px;
    }

    .sub-item {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
    }

    .el-form-item {
      margin-bottom: 6px;
    }
  }
}
</style>
